
<template>
  <div class="goods">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <!-- 搜索 -->
      <div class="searchbox">
        <el-input v-model="queryInfo.query" placeholder="请输入内容" class="input-with-select">
          <template #append>
            <el-button @click="search">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-button type="primary" @click="toAddGoods">添加商品</el-button>
      </div>
      <!-- 表格主体 -->
      <el-table :data="GoodsList" style="width: 100%" border stripe size="default">
        <el-table-column prop="index" label width="50" />
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="price" label="商品价格(元)" width="120" />
        <el-table-column prop="weight" label="商品重量" width="90" />
        <el-table-column prop="number" label="商品数量" width="90" />
        <el-table-column prop="time" label="创建时间" width="160" />
        <el-table-column prop="operation" label="操作" width="150">
          <template #default="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" @click="edit(scope.row)">
              <el-icon>
                <EditPen />
              </el-icon>
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" @click="deleteThere(scope.row)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->

      <div class="pagination">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="queryInfo.pagenum"
            v-model:page-size="queryInfo.pagesize"
            :page-sizes="[ 5, 10, 15,20,50]"
            layout="total,sizes, prev, pager, next, jumper"
            :total="totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
      <!-- 编辑对话框 -->
      <el-dialog v-model="editVisible" title="修改用户信息">
        <el-form
          :model="editFrom"
          :label-width="100"
          class="demo-ruleForm"
          :rules="addrules"
          ref="editFromref"
        >
          <el-form-item label="商品名称" prop="goodsname">
            <el-input v-model="editFrom.goodsname" type="text" />
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="editFrom.price" type="text" />
          </el-form-item>
          <el-form-item label="商品数量" prop="number">
            <el-input v-model="editFrom.number" type="text" />
          </el-form-item>
          <el-form-item label="商品重量" prop="weight">
            <el-input v-model="editFrom.weight" type="text" />
          </el-form-item>
          <el-form-item>
            <el-button @click="editVisible = false">取消</el-button>
            <el-button type="primary" @click="editThere(editFromref)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, ref, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { DateFilter } from "../tools/filiter";
import {
  getGoodsList,
  postaddGoods,
  puteditGoods,
  deleteGoods,
  getsearchGoods
} from "../tools/ajax.js";
const route = useRoute();
const router = useRouter();


const editFromref = reactive({});
const GoodsList = reactive([]);
const editVisible = ref(false);
const editFrom = reactive({
  goodsname: "",
  price: "",
  number: "",
  weight: "",
  id: ""
});
const queryInfo = reactive({
  query: "",
  // 当前页数
  pagenum: 1,
  // 每页显示多少数据
  pagesize: 10
});
const totals = ref(0);

const addrules = {
  goodsname: [
    {
      required: true,
      message: "商品名称不能为空",
      trigger: "change"
    }
  ],
  price: [
    {
      required: true,
      message: "商品价格不能为空",
      trigger: "change"
    }
  ],
  weight: [
    {
      required: true,
      message: "商品重量不能为空",
      trigger: "change"
    }
  ],
  number: [
    {
      required: true,
      message: "商品数量不能为空",
      trigger: "change"
    }
  ]
};
function getlist() {
  getGoodsList({ params: queryInfo }).then(res => {
    console.log(res.data);
    totals.value = res.data.total;
    GoodsList.splice(0, 1000);
    res.data.goods.forEach((item, index) => {
      GoodsList.push({
        index: index + 1,
        name: item.goods_name,
        price: item.goods_price,
        weight: item.goods_weight,
        number: item.goods_number,
        time: DateFilter(item.add_time),
        id: item.goods_id
      });
    });
  });
}
// 修改用户状态
function toAddGoods() {
  router.push("/goods/all");
}
function handleSizeChange() {
  console.log("每页条数改变了");
  getlist();
}
function handleCurrentChange() {
  console.log("翻页了");
  getlist();
}
function search() {
  console.log("搜索执行了");
  getlist();
}

// 添加用户
// function adduserOK(from) {
//   from.validate(flag => {
//     if (flag) {
//       console.log(adduserFrom);
//       postAddUser(adduserFrom).then(res => {
//         console.log(res);
//         if (res.meta.status == 201) {
//           ElMessage.success(res.meta.msg);
//           getlist();
//         } else {
//           ElMessage.error(res.meta.msg);
//         }
//       });
//       adduserVisible.value = false;
//     } else {
//       return;
//     }
//   });
// }

// 编辑信息
function editThere(from) {
  from.validate(flag => {
    if (flag) {
      console.log(editFrom);
      puteditGoods({
        id: editFrom.id,
        goods_name: editFrom.goodsname,
        goods_number: editFrom.number,
        goods_weight: editFrom.weight,
        goods_price: editFrom.price
      }).then(res => {
        console.log(res);
        if (res.meta.status == 200) {
          ElMessage.success(res.meta.msg);
          editVisible.value = false;
          getlist();
        } else {
          ElMessage.error(res.meta.msg);
        }
      });
    } else {
      return;
    }
  });
}
function edit(item) {
  console.log(item);
  editVisible.value = true;
  editFrom.goodsname = item.name;
  editFrom.price = item.price;
  editFrom.number = item.number;
  editFrom.weight = item.weight;
  editFrom.id = item.id;
}

// 删除商品
function deleteThere(item) {
  ElMessageBox.confirm("此操作将永久删除该商品,是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deleteGoods({ id: item.id }).then(res => {
        console.log(res);
        if (res.meta.status == 200) {
          getlist();
          ElMessage.success(res.meta.msg);
        } else {
          ElMessage.error(res.meta.msg);
        }
      });
    })
    .catch(() => {
      ElMessage.warning("取消删除");
    });
}
onBeforeMount(() => {
  getlist();
});
</script>

<style scoped>
.searchbox {
  margin-bottom: 20px;
  display: flex;
}
.pagination {
  margin-top: 20px;
}
.input-with-select {
  width: 400px;
  height: 40px;
}
.searchbox > .el-button.el-button--primary {
  height: 40px;
  margin-left: 30px;
}
.cell {
  font-size: 12px !important;
}
</style>